<template>
    <div style="display: flex;flex-direction: column; margin-left: 5%">
        <div style="display: flex;">
            <el-avatar :size="50" :src="props.data.url" @click="PushUserPage" style="cursor: pointer;" />
            <div style="display: flex;flex-direction: column;">
                <el-text class="mx-1" @click="PushUserPage" style="cursor: pointer;color: blue">{{ props.data.acName
                    }}</el-text>
                <el-text class="mx-1">{{ props.data.personSignature }}</el-text>
                <el-button v-if="!youFocus" @click="AddFocus">关注{{ (props.data.asLocalNum ? asLocalNum : 0) + (youFocus
                    ?
                    1 : 0) }}</el-button>
                <el-button v-else @click="CancelFocus">已关注{{ (props.data.asLocalNum ? asLocalNum : 0) + (youFocus
                    ?
                    1 : 0) }}</el-button>
            </div>
        </div>
        <div style="display: flex; margin-top: 5%;">
            <el-button v-if="!youLike" @click="Like">点赞{{ props.blogLikes }}</el-button>
            <el-button v-else @click="CancelLike">已点赞{{ props.blogLikes + likeAdd }}</el-button>
            <div>
                <el-button v-if="!youStar" @click="CollectionBlog">收藏{{ props.blogStars + (youStar ? 1 : 0)
                    }}</el-button>
                <el-button v-else>已收藏{{ props.blogStars + (youStar ? 1 : 0) }}</el-button>

                <el-dialog v-model="CollectionVisiable" title="收藏博客" width="500px">
                    <div style="display:flex;">
                        <el-text class="mx-1;" style="font-size: 16px;">选择收藏夹：</el-text>
                        <el-select v-model="collectionOptionValue" value-key="id" placeholder="Select"
                            style="width: 240px">
                            <el-option v-for="item in collectionOptions" :key="item.id" :label="item.collectionName"
                                :value="item" />
                            <template #footer>
                                <el-button v-if="!isAdding" text bg size="small" @click="onAddOption">
                                    新建收藏夹
                                </el-button>
                                <template v-else>
                                    <el-input v-model="newCollectionName" class="option-input" placeholder="创建新收藏夹"
                                        size="small" />
                                    <div style="margin-top: 10px">
                                        <el-button type="primary" size="small" @click="onConfirmCreateNewCollection">
                                            confirm
                                        </el-button>
                                        <el-button size="small" @click="clear">cancel</el-button>
                                    </div>
                                </template>
                            </template>
                        </el-select>
                        <el-button style="margin-left: 10%;" @click="AddBlogToColletion">确定</el-button>
                    </div>
                </el-dialog>
            </div>
            <el-button @click="copyToClipboard(shareText)">分享</el-button>
        </div>
        <p v-for="item in props.tagsArr" :key="item.id" :data="item" style="cursor: pointer;"
            @click="PushTagSerch(item)">{{
                item }}</p>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router'; // 引入路由
import { IsLoginIn } from '@/components/functions/IsLoginIn.vue';
import axios from 'axios'

const router = useRouter();

const props = defineProps({
    data: {
        type: Object,
        default: () => ({
            id: '-1',
            acName: '',
            personSignature: '',
            url: './image/202407/-b27ca09139ad431580024a705a31f145.png',
            asLocalNum: 0,
        })
    },
    tagsArr: {
        type: Object,
        default: () => ({
            tags: []
        })
    },
    youLike: false,
    youStar: false,
    youFocus: false,
    userId: 0,
    blogId: 0,
    blogLikes: 0,
    blogStars: 0
});

const youLike = ref(false);
const youStar = ref(false);
const youFocus = ref(false);

const likeAdd = ref(0);


const shareText = ref('');

const blogLikes = ref(props.blogLikes);
const blogStars = ref(props.blogStars);

const collectionOptionValue = ref('');

const CollectionVisiable = ref(false);

const collectionOptions = ref([]);

const newCollectionName = ref('')

const isAdding = ref(false)

const onAddOption = () => {
    isAdding.value = true
}

function Print() {
    // console.log(props.data.url);
    // url.value = props.data.url;
    // console.log(props.youLike);
    console.log(youStar);
}

function copyToClipboard(text) {
    navigator.clipboard.writeText(text) // 使用Clipboard API的writeText方法将文本写入剪切板
        .then(() => {
            console.log('Text copied to clipboard');  // 复制成功后的回调函数
        })
        .catch((error) => {
            console.error('Failed to copy text: ', error);  // 复制失败后的回调函数
        });
}

const clear = () => {
    newCollectionName.value = ''
    isAdding.value = false
}

function AddFocus() {
    IsLoginIn();
    axios
        .post('/api/focus/add', {
            local_id: props.userId,
        }, {
            headers: {
                'HOSHINO_T_KK': localStorage.getItem('userToken'),
            }
        })
        .then(response => {
            console.log(response);
            youFocus.value = true;
        })
        .catch(function (error) { // 请求失败处理
            console.log(error);
        });
}

function CancelFocus() {
    IsLoginIn();
    axios
        .post('/api/focus/del', {
            local_id: props.userId,
        }, {
            headers: {
                'HOSHINO_T_KK': localStorage.getItem('userToken'),
            }
        })
        .then(response => {
            console.log(response);
            youFocus.value = false;
        })
        .catch(function (error) { // 请求失败处理
            console.log(error);
        });
}

function Like() {
    IsLoginIn();
    axios
        .post('/api/blogLike/add', {
            blog_id: props.blogId,
        }, {
            headers: {
                'HOSHINO_T_KK': localStorage.getItem('userToken'),
            }
        })
        .then(response => {
            console.log(response);
            youLike.value = true;
            likeAdd.value = 1;
        })
        .catch(function (error) { // 请求失败处理
            console.log(error);
        });
}

function CancelLike() {
    IsLoginIn();
    axios
        .post('/api/blogLike/del', {
            blog_id: props.blogId,
        }, {
            headers: {
                'HOSHINO_T_KK': localStorage.getItem('userToken'),
            }
        })
        .then(response => {
            console.log(response);
            youLike.value = false;
        })
        .catch(function (error) { // 请求失败处理
            console.log(error);
        });
}

function CollectionBlog() {
    IsLoginIn();
    CollectionVisiable.value = !CollectionVisiable.value;
    axios
        .post('/api/collection/getUserCollection', {
            user_id: localStorage.getItem('userId')
        }, {
            headers: {
                'HOSHINO_T_KK': localStorage.getItem('userToken'),
            }
        })
        .then(response => {
            console.log(response);
            collectionOptions.value = response.data.data;
            // console.log(collectionOptions.value);
        })
        .catch(function (error) { // 请求失败处理
            console.log(error);
        });
}

const onConfirmCreateNewCollection = () => {
    if (newCollectionName.value) {
        axios
            .post('/api/collection/create', {
                collection_name: newCollectionName.value,
            }, {
                headers: {
                    'HOSHINO_T_KK': localStorage.getItem('userToken'),
                }
            })
            .then(response => {
                console.log(response);
                axios
                    .post('/api/collection/getUserCollection', {
                        user_id: localStorage.getItem('userId')
                    }, {
                        headers: {
                            'HOSHINO_T_KK': localStorage.getItem('userToken'),
                        }
                    })
                    .then(response => {
                        console.log(response);
                        collectionOptions.value = response.data.data;
                        // console.log(collectionOptions.value);
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            })
            .catch(function (error) { // 请求失败处理
                console.log(error);
            });
        clear()
    }
}

function AddBlogToColletion() {
    // console.log(collectionOptionValue);
    // LikeLinkStyle.value.color = "blue";
    axios
        .post('/api/collection/addBlogIn', {
            blog_id: props.blogId,
            collection_id: collectionOptionValue.value.id
        }, {
            headers: {
                'HOSHINO_T_KK': localStorage.getItem('userToken'),
            }
        })
        .then(response => {
            console.log(response);
            console.log(props);
            // props.data.blogStars++;
            youStar.value = true;
            CollectionVisiable.value = !CollectionVisiable.value;
        })
        .catch(function (error) { // 请求失败处理
            console.log(error);
        });
}

function PushUserPage() {
    // console.log(props.data);
    router.push({ path: '/user', query: { id: props.userId } });
}

function PushTagSerch(tag) {
    router.push({ path: '/search', query: { keyword: tag } });
}

onMounted(() => {
    setTimeout(() => {
        youLike.value = props.youLike;
        youFocus.value = props.youFocus;
        youStar.value = props.youStar;
        shareText.value = 'LocalHost:5173' + '/blogView?id=' + props.userId;
    }, 500);
})

watch(() => props, (newValue) => {

});
</script>